Conception

During the conception of my website I decided to choose a simple and modern design that should not distract from my future portfolio projects. After a first pencil sketch of the home screen, I immediately started to prototype the site in Adobe XD. The choice of colors and the general layout was based on my own corporate design, which I have been using in my CV and cover letter for some time now.

It was especially important to me that my site looks good on desktop monitors as well as on smaller devices like tablets and smartphones, so I decided to take a mobile-first approach to the design - which is standard nowadays anyway. The two finished prototypes, which were an enormous help for the later realisation of the website, clearly show their partly exact correspondence and can be seen more closely with the following click-dummies:

-> My Website Click-Dummy (web)
-> My Website Click-Dummy (mobile)

---

Realization

This project was my first real entry into the world of web development and I learned a lot during the implementation of my website. Right from the start, I set myself the challenge of coding the site from scratch on my own, without the help of website construction kits like Jimdo or Wordpress, in order to leave myself as much design freedom as possible.

I worked with Visual Studio Code and besides HTML and CSS I also acquired first basic knowledge in Javascript and Php angeeignet. The online course Die komplette Web-Entwickler Masterclass by Denis Panjuta and Jannis Seemann on Udemy has helped me a lot and I can recommend it to anyone who wants to give a try in web development. I am especially proud of some special website features like the contact form or the social-media hover animationes, which gave me some serious headaches as a coding beginner.

Click on the second image to see a GIF of the different website features

Last but not least you can have a look at three mockups of my finished portfolio website (click on the picture to see the remaining two), which especially emphasize the responsive approach of my site.

Mockup PSDs created by freepik